<template>
	<view class="container">
		<view class="body">
			<view class="module_box">
				<view class="moduletitle">
					{{details.goodsname}}
				</view>
				<view class="time_box">
					<view class="titles">
						游玩日期
					</view>
					<view class="times_box" show-scrollbar="true" scroll-x="true" scroll-left="120">
						<!-- <scroll-view class="times_box" scroll-x="true"> -->
						<template v-for="(v,i) in timesList" :key="i">
							<view class="timesBox">
								<view>{{v.text}}</view>
								<view>{{v.times}}</view>
							</view>
						</template>
					</view>
				</view>
				<view class="price_box">
					<view class="price_text">
						<view class="titles">
							购买数量
						</view>
						<view class="">
							购买须知
						</view>
					</view>
					<view class="price_number">
						<view :class="['btn',num<=1?'':'checks']" @click="editTourist">
							-
						</view>
						<view class="num">
							{{num}}
						</view>
						<view class="btn checks" @click="addTourist">
							+
						</view>
					</view>
				</view>
			</view>
			<view class="module_box">
				<view class="title">
					联系人信息
				</view>
				<view class="check_pheuser">
					<!-- {{checkuserList}} -->
					<uni-list-item title="姓名" :rightText="checkuserList.name" link="reLaunch"></uni-list-item>
					<uni-list-item title="身份证" :rightText="checkuserList.idcard" link="reLaunch"></uni-list-item>
					<uni-list-item title="手机号" :rightText="checkuserList.tel" link="reLaunch"></uni-list-item>
				</view>
			</view>
			<view class="module_box">
				<view class="title">
					游玩人信息
				</view>
				<view class="user_list">
					<template v-for="(v,i) in userList" :key="i">
						<!-- check_pheuser -->
						<view :class="['user_list_box',v.check==true?'check_pheuser':'']" @click="toChecktourist(i)">
							{{v.name}}
						</view>
					</template>
					<view class="user_list_box red">新建<uni-icons type="right" size="16" color="orangered"></uni-icons>
					</view>
				</view>
				<view class="check_users" v-for="(v,i) in tourist" :key="i">
					<text class="lef">{{v.title}}</text>
					<view class="blue" v-if="!v.user" @click="openFun(i)">点击选择游玩人信息</view>
					<view class="" v-else>
						<view class="title">
							姓名 {{v.user}}
						</view>
						<view class="">
							证件号 {{v.code}}
						</view>
						<view class="">
							手机号 {{v.phone}}
						</view>
					</view>
				</view>
			</view>
			<view class="module_box">
				<view class="title">
					促销优惠
				</view>
				<view class="preferential">
					<view class="">
						平台优惠券
					</view>
					<view class="preferents">
						可用0张
						<uni-icons type="right" size="16" color="gray" />
					</view>
				</view>
			</view>
			<view class="module_box">
				<view class="title">
					支付方式
				</view>
				<view class="pay_box">
					<view class="pay_title">
						微信支付
					</view>
					<view class="pay_text">
						方便快捷
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				合计
				<view class="price">
					￥
					<text>108.00</text>
				</view>
			</view>
			<view class="btn">
				结算
			</view>
		</view>



		<!-- 选择游客 常用联系人 -->
		<uni-popup ref="popup" type="bottom" @click="closeFun" background-color="#fff">
			<view class="popup_box" :class="{ 'popup-height': 'left' }">
				<view class="title">
					常用联系人
				</view>
				<view class="add_new">
					<uni-icons type="plusempty" color="orangered" size="16"></uni-icons>
					新增联系人
				</view>
				<view class="bodys">
					<template v-for="(v,i) in userList" :key="i">
						<view class="user_box">
							<uni-icons type="checkbox" size="30"></uni-icons>
							<view class="userBox">
								<view class="names">
									{{v.name}}
									<text v-if="v.isdefault==1">默认</text>
								</view>
								<view class="phones">
									身份证 {{v.idcard}}
								</view>
								<view class="phones">
									手机号 {{v.tel}}
								</view>
							</view>
							<uni-icons type="compose" color="orangered" size="30"></uni-icons>

						</view>

					</template>
				</view>

			</view>
		</uni-popup>
		<!-- 新增联系人 -->
		<uni-popup ref="add" type="bottom" @click="closeAdd" background-color="#fff">
			<view class="popup_box" :class="{ 'popup-height': 'left' }">
				<view class="title">
					新增联系人
				</view>

			</view>
		</uni-popup>
		<!-- 编辑联系人 -->

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		qsAll
	} from "@/utils/qsAll.js"
	import {
		shopDetails
	} from "@/api/index.js"
	import {
		getMemInfo
	} from "@/api/user.js"

	// 选中id
	const ids = ref('')
	// 用户信息
	const userList = ref([])
	// 订单详情
	const details = ref({})
	const checkuserList = ref({})
	const num = ref(1)
	// 游客列表
	const tourist = ref([{
		title: '游客1',
		users: '',
		code: '',
		phone: ''
	}])
	const timesList = reactive([{
			times: '08月28日',
			text: '星期三'
		},
		{
			times: '08月29日',
			text: '星期四'
		},
		{
			times: '08月30日',
			text: '星期五'
		},
		{
			times: '08月31日',
			text: '星期六'
		},
		{
			times: '09月01日',
			text: '星期日'
		},
		{
			times: '09月02日',
			text: '星期一'
		},
		{
			times: '09月03日',
			text: '星期二'
		},
		{
			times: '09月04日',
			text: '星期三'
		}
	])
	const popup = ref(null);
	const add = ref(null);
	const changes = ref(null);
	onLoad((options) => {
		ids.value = options.ids
	})
	onShow(() => {
		console.log(ids.value, 'ids')
		qsAll([shopDetails({
			id: ids.value
		}), getMemInfo()]).then(res => {
			console.log(res, 'res')
			details.value = res[0].data
			userList.value = res[1].data
			let data = {},
				num = 0
			userList.value.forEach((v, i) => {
				// return ? v
				if (v.isdefault == 1) {
					data = v
					num++
				}
			})
			data = (num == 0 ? userList.value[0] : data)
			checkuserList.value = data
		})
	})
	// 选择游客
	const toChecktourist = (num) => {
		userList.value[num].check = (userList.value[num].check == true ? false : true)
	}
	// 添加游客
	const addTourist = () => {
		num.value++
		tourist.value.push({
			title: '游客' + num.value,
			users: '',
			code: '',
			phone: ''
		})
	}
	// 减少游客
	const editTourist = () => {
		if (num.value > 1) {
			num.value--
			tourist.value.splice(tourist.value.length - 1)
		}
	}
	const touristIndex = ref('')
	const openFun = ((num) => {
		touristIndex.value = num
		popup.value.open();
	})

	const closeFun = (() => {
		touristIndex.value = ''
		popup.value.close()
	})
	const closeAdd = (() => {
		add.value.close()
	})
	const closeChange = (() => {
		change.value.close()
	})
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: column;
		overflow-x: hidden;

		.body {
			flex: 1;
			padding: 0 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			overflow-y: auto;
		}

		.module_box {
			margin-top: 20rpx;
			padding: 30rpx 0;
			box-sizing: border-box;
			border-radius: 16rpx;
			background: #fff;

			.title {
				font-weight: 600;
				padding: 0 30rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
			}

			.moduletitle {
				padding: 0 30rpx;
				padding-bottom: 30rpx;
				font-weight: 600;
				box-sizing: border-box;
				border-bottom: 1rpx solid lightgray;
			}

			.time_box {
				padding: 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid lightgray;

				.titles {
					padding: 20rpx 0;
					font-weight: 600;
				}


				.times_box {
					width: 100%;
					display: flex;
					overflow-x: auto;
					white-space: nowrap;

					.timesBox {
						border: 1rpx solid orangered;
						// float: left;
						border-radius: 10rpx;
						padding: 20rpx 10rpx;
						display: inline-block;
						width: 200rpx;

						view {
							text-align: center;

						}

						view+view {
							padding-top: 6rpx;
						}
					}

					.timesBox+.timesBox {
						margin-left: 20rpx;
					}
				}
			}

			.price_box {
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.price_text {
					font-size: 30rpx;

					.titles {
						font-weight: 600;
						font-size: 34rpx;
						padding-bottom: 15rpx;
					}
				}

				.price_number {
					display: flex;
					align-items: center;

					.num {
						text-align: center;
						width: 66rpx;
						font-weight: 600;
						font-size: 36rpx;
					}

					.btn {
						border-radius: 50%;
						border: 4rpx solid gray;
						box-sizing: border-box;
						color: gray;
						width: 60rpx;
						height: 60rpx;
						text-align: center;
						line-height: 50rpx;
						font-size: 60rpx;
					}

					.checks {
						color: orangered;
						border-color: orangered;
					}
				}
			}

			.user_list {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.user_list_box {
					border-radius: 10rpx;
					// padding: 30rpx 40rpx;
					line-height: 80rpx;
					width: 130rpx;
					text-align: center;
					border: 1rpx solid orangered;
				}

				.red {
					color: orangered;
				}

				.user_list_box+.user_list_box {
					margin-left: 20rpx;
				}


			}

			.check_pheuser {
				background: orangered;
				color: #fff;
			}

			.check_users {
				// background: orangered;
				// color: #fff;
				display: flex;
				padding: 20rpx 30rpx;
				box-sizing: border-box;

				.lef {
					margin-right: 20rpx;
				}

				.blue {

					color: #527aff;
				}
			}

			.preferential {
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.preferents {
					color: orangered;
				}
			}

			.user_box {}

			.pay_box {
				border-radius: 16rpx;
				border: 1rpx solid orangered;
				background: #f9eeec;
				margin-left: 30rpx;
				width: 260rpx;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.pay_title {
					font-weight: 600;
					margin-bottom: 10rpx;
					font-size: 30rpx;
				}

				.pay_text {
					font-size: 28rpx;
				}
			}

		}

		.footer {
			width: 100%;
			height: 140rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-top: 1rpx solid lightgray;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
			}

			.price {
				color: orangered;
				font-size: 20rpx;
				font-weight: 600;

				text {
					font-size: 42rpx;
				}
			}

			.btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 80rpx;
				background: orangered;
				color: #fff;
			}
		}

	}

	.uni-popup {
		width: 100%;
		height: 100%;
	}

	.uni-popup .uni-popup__wrapper .popup_box {
		height: 60vh;
		// overflow: auto;
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		// margin-top: 50vh;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		background: #f8f8f8;

		.title {
			text-align: center;
			padding: 10rpx 0;
		}

		.add_new {
			width: 90%;
			margin-left: 5%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			box-sizing: border-box;
			color: orangered;
			background: #f9eeec;
			border: 1rpx solid orangered;
			border-radius: 80rpx;
		}

		.bodys {
			width: 100%;
			padding: 0 5%;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			flex: 1;
			overflow-y: auto;

			.user_box {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				.userBox {
					flex: 1;
					padding: 0 10rpx;

					.names {
						font-weight: 600;
						font-size: 36rpx;

						text {
							font-size: 26rpx;
							color: orangered;
							font-weight: 400;
							background: #f9eeec;
							margin-left: 10rpx;
							padding: 6rpx 10rpx;
							border-radius: 6rpx;
							border: 1rpx solid orangered;
						}
					}

					.phones {
						color: gray;
						font-size: 30rpx;
						margin-top: 10rpx;
					}

				}
			}

		}

	}
</style>